![PlaywrightによるE2EテストでOTP(ワンタイムパスワード) MFAを通す](https://devio2024-media.developers.io/image/upload/v1721121674/user-gen-eyecatch/ofye4vgjf6qpa09wvkfj.png)
PlaywrightによるE2EテストでOTP(ワンタイムパスワード) MFAを通す
PlaywrightによるE2Eテストの実装において、OTP(ワンタイムパスワード) MFAを通す方法について書きました。Google Authenticatorを使っている場合の方法になります。
情報システム室の進地@日比谷です。
PlaywrightでE2Eテストを行うときに、SaaSのMFAを通す必要がありました。本エントリーではOTP(ワンタイムパスワード) MFAをPlaywrightで通す方法について記述します。
必要なモジュールのインストール
Playwrightのプロジェクトルートディレクトリで totp-generator モジュールをインストールします。
$ npm i totp-generator
また、対象のOTP generatorのシークレットキーを環境変数で渡したいので、dotenvモジュールもインストールします。
$ npm i dotenv
OTP generatorのシークレットキーの取得(Google Authenticator使用)
Google Authenticatorを使っている場合、次の手順でシークレットキーを取得できます。
- Google Authenticatorのメニュー => [アカウントを移行] から取得したいOTP generator アカウントを選択して、QRコードをエクスポート
- 1でエクスポートしたQRコードをQRコードリーダで読み取り、次のようなURIを得る。
a.otpauth-migration://offline?data=CjEKCkhlbGxvId6tvu8SGEV4YW1wbGU6YWxpY2VAZ29vZ2xlLmNvbRoHRXhhbXBsZTAC
- otpauth ツールに2-aで得たURIを渡して、シークレットキーを取得する。
a.~/go/bin/otpauth -link "otpauth-migration://offline?data=CjEKCkhlbGxvId6tvu8SGEV4YW1wbGU6YWxpY2VAZ29vZ2xlLmNvbRoHRXhhbXBsZTAC"
b. 3-aの結果は次のようになる。otpauth://totp/Example:alice@google.com?issuer=Example&secret=JBSWY3DPEHPK3PXP
このsecret=の後の値がシークレットキーになる
Playwrightのテストシナリオを記述する
.envファイルに取得したシークレットキーを
MFA_SECRET_KEY=JBSWY3DPEHPK3PXP
のように設定する。
その上で、テストシナリオをたとえば、 tests/sample.spec.ts
に次のように記述する。
import 'dotenv/config';
import { TOTP } from "totp-generator";
import { test, expect } from '@playwright/test';
test.beforeEach(async ({ page }) => {
// MFAを通す処理を記述
const { otp } = await TOTP.generate(
process.env.MFA_SECRET_KEY
);
// otpにワンタイムパスワードが入っているので画面に入力する
await page.locator("#some-input").fill(otp);
// 以後、フォームを送信したり必要な処理をする
}